import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'

const QueryClub = (props) => {
  const {queryInvite, join, inviteId, inviteIdChange, tip = '', querySuccess, methodDetail} = props
  const inviteCn = classnames({'buy-row': true, hide: !(tip === '')})
  const tipCn = classnames({'buy-row': true, hide: tip === ''})
  return <div className="modal-wrapper">
    <div className="buy-row first group-modal-content">
      <div className="club-id-text">俱乐部ID: </div>
      <div className="club-content-row v-center">
        <input type="text" className="club-id-input" placeholder="请输入俱乐部ID" value={inviteId} onChange={inviteIdChange}></input>
        <img src="img/club/search-btn.png?v=20181201" alt="" className="search-btn"  onClick={queryInvite}/>
      </div>      
      { querySuccess ? <div className="club-details-content pure-g">
        <div className="pure-u-1-4">
          <img src={methodDetail.headUrl} alt="" className="club-detail-head"/>
        </div>
        <div className="pure-u-3-4 pure-g">
          <div className="pure-u-1-1">
            俱乐部名称: {methodDetail.confName}
          </div>
          <div className="pure-u-1-1">
            会长: {methodDetail.nickname}
          </div>
        </div>
      </div> : <div className="club-tip-content">
        <span>{tip}</span>
      </div> }
    </div>
    <div className="bottom-btn">
      {
        querySuccess ? <img onClick={join} className="group-smaller-btn" src="img/mall/dialog/confirm.png?v=20181201" alt=""></img> : null
      }
    </div>
  </div>
}


const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: msg => dispatch(global.allActions.appActions.openModal(msg))
  }
}

class JoinRule extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      step: 1,
      inviteId: '',
      tip: '',
      querySuccess: false,
      serverSideGroup: undefined,
      methodDetail: {}
    }
  }
  
  public componentDidMount() {
  }

  public focusIpt() {
    // if (document.getElementById('rule-ipt')) {
    //   document.getElementById('rule-ipt').focus()
    // }
  }

  public queryInvite() {
    if (this.state.inviteId.length === 0) {
      this.setState({tip: '请输入俱乐部ID'})
    } else {
      this.setState({tip: ''})
      const url = `${config.pre}/crowd/conf/${Cookies.get('areaCode')}/${this.state.inviteId}`
      const opt = { method: 'GET' }
      fetchJson(url, opt).then(data => {
        console.log(data);
        if (data.result) {
          this.setState({tip: data.message, querySuccess: false})
          return 
        }
        // this.props.openModal( data.message)
        this.setState({querySuccess: true, serverSideGroup: data.data, methodDetail: data.data})
      })
    }
  }

  public join() {
    if (!this.state.querySuccess) {
      this.setState({tip: '请先查询俱乐部'})
      return 
    }
    const send = {
      confId: this.state.serverSideGroup.id,
      uid: this.props.userInfo.uid
    }
    console.log('send', send);
    const url = `${config.pre}/crowd/conf/${Cookies.get('areaCode')}/applyConf`
    const opt = { method: 'POST', body: JSON.stringify(send) }
    fetchJson(url, opt).then(data => {
      if (data.result) {
        this.props.openModal( data.message)
        return
      }
      this.props.openModal('您已成功申请加入俱乐部，请等待会长审核。');
      this.props.close();
    })
  }

  
  public handleRuleIdChange(e) {
    this.setState({inviteId: e.target.value, querySuccess: false})
  }

  confirm() {
    console.log('confirm!!')
  }

  public render() {
    const {close, item} = this.props
    const {step, inviteId, tip, orderTip, querySuccess, methodDetail} = this.state
    return <div className="dialog-block has-mask full" onClick={this.focusIpt}>
      <div className="group-content content">
        <div className="full-width title-wrapper">
          {/* <img className="title big" src="img/styleImg/dialog-kuang.png?v=20181201" alt=""/> */}
          <img onClick={close} className="close" src="img/mall/dialog/close.png?v=20181201" alt=""/>
        </div>
        <div className="modal-wrapper">
           <QueryClub item={item} inviteId={inviteId} tip={tip}
            queryInvite={this.queryInvite.bind(this)}
            join={this.join.bind(this)}
            querySuccess={querySuccess}
            methodDetail={methodDetail}
            inviteIdChange={this.handleRuleIdChange.bind(this)}></QueryClub>
        </div>
      </div>
    </div>
  }

}
export default connect(mapStateToProps, mapDispatchToProps)(JoinRule)